<template>
  <div>
    <el-table v-loading="loading" :data="visitList" stripe>
      <!-- <el-table-column
        label="诊所名称"
        align="center"
        prop="clinicName"
      ></el-table-column> -->
      <el-table-column
        label="随访时间"
        align="center"
        prop="visitTime"
        min-width="160"
      >
        <template slot-scope="scope">
          {{ scope.row.visitTime }}
        </template>
      </el-table-column>
      <el-table-column
        label="随访医生"
        align="center"
        prop="visitDoctor"
      ></el-table-column>
      <el-table-column
        label="TC"
        align="center"
        prop="counselor"
      ></el-table-column>
      <el-table-column label="随访状态" align="center" prop="visitStatus">
        <template slot-scope="scope">
          {{ returnVisitStatusEnum[scope.row.visitStatus] }}
        </template>
      </el-table-column>
      <el-table-column
        label="回访内容"
        align="center"
        prop="contet"
        min-width="160"
      ></el-table-column>
      <el-table-column
        label="回访结果"
        align="center"
        prop="result"
        min-width="160"
      ></el-table-column>
      <el-table-column label="操作" align="center" min-width="100">
        <el-dropdown slot-scope="scope">
          <span class="el-dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleReturnVisitEditor()">
              新建回访
            </el-dropdown-item>
            <el-dropdown-item
              v-if="returnVisitStatusEnum[scope.row.visitStatus] === '待计划'"
              @click.native="handleReturnVisitEditor(scope.row)"
            >
              编辑随访
            </el-dropdown-item>
            <el-dropdown-item
              v-if="returnVisitStatusEnum[scope.row.visitStatus] === '待计划'"
              @click.native="handleComplete(scope.row)"
            >
              完成随访
            </el-dropdown-item>
            <el-dropdown-item @click.native="handleDelete(scope.row)">
              删除
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-table-column>
      <empty slot="empty"></empty>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getListTc"
    ></pagination>
    <update-visit
      v-model="returnVisitEditor.visible"
      :patient="patient"
      :data="returnVisitEditor.data"
      :doctor-list="doctorList"
      @ok="getListTc"
      @close="handleClose"
    ></update-visit>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import {
  listDoctor,
  getDoctor,
  delDoctor,
  addDoctor,
  updateDoctor,
  exportDoctor,
} from '@/api/services/doctor'
import { returnVisitStatusEnum, trackingStatusEnum } from '@/utils/enums'
import Empty from '@/components/yiya/Empty'
import updateVisit from '@/views/components/TabsPanes/FollowupVisitPane/updateVisit'

export default {
  name: 'TCVisitRecordPane',
  components: {
    Empty,
    updateVisit,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    patient: {
      type: Object,
      default: () => ({}),
    },
    doctorList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: true,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isAsc: 'desc',
        orderByColumn: 'visitTime',
      },
      visitList: [],
      returnVisitEditor: {
        visible: false,
        data: {},
      },
    }
  },
  computed: {
    dayjs() {
      return dayjs
    },
    trackingStatusEnum() {
      return trackingStatusEnum
    },
    returnVisitStatusEnum() {
      return returnVisitStatusEnum
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.getListTc()
      }
    },
  },
  mounted() {
    this.getListTc()
  },
  methods: {
    handleClose() {
      this.returnVisitEditor.visible = false
    },
    async getListTc() {
      try {
        this.loading = true
        const { rows, total } = await listDoctor({
          ...this.queryParams,
          clinicPersonId: this.patient.id,
        })
        this.visitList = rows
        this.total = total
      } finally {
        this.loading = false
      }
    },
    handleReturnVisitEditor(visit) {
      this.returnVisitEditor = {
        visible: true,
        data: visit || {},
      }
    },
    async handleComplete(visit) {
      const { value: result } = await this.$prompt('随访结果', '完成随访', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入随访结果',
        inputValidator: (e) => !!(e && e.trim()),
        inputErrorMessage: '随访结果不能为空',
      })
      await updateDoctor({
        id: visit.id,
        result,
        visitStatus: returnVisitStatusEnum['已完成'],
        visitTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      })
      this.msgSuccess('回访完成')
      await this.getListTc()
    },
    async handleDelete(visit) {
      await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      await delDoctor(visit.id)
      this.msgSuccess('删除成功')
      await this.getListTc()
    },
  },
}
</script>
